<template>
  <div class="resource-manage">
     <Tabs :value="tab1">
        <TabPane label="报修列表" name="name1">
          <div class="clearfix">
            <div class="fl">
             产品名称
            <Input placeholder="请输入产品名称" style="width: auto" >
              <!-- <span slot="append">查询</span> -->
            </Input>
             &nbsp;&nbsp;&nbsp;
              报修时间
              <DatePicker type="datetime" format="yyyy-MM-dd hh:mm" placeholder="请选择时间"></DatePicker>
              &nbsp;&nbsp;&nbsp;
            <Button type="primary" >查询</Button>
            </div>
            <div class="fr">
              <Button type="warning">我要报修</Button>
            </div>
          </div>

    <div class="mt10">
      <Table border ref="selection" :columns="columns1" :data="data1">
        <template slot-scope="{ row, index }" slot="status">
          <span class="c1" v-if="index==1">正常运行</span>
          <span class="c4" v-else>维修中</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Icon type="ios-create c5"  size="20" title="编辑"/>
        </template>
      </Table>
    </div>
    
    <div class="page mt20">
      <Page :total="100" show-sizer show-total />
    </div> 
        </TabPane>
        <TabPane label="维修记录" name="name2">
          
          <div class="clearfix">
            <div class="fl">
             产品名称
            <Input placeholder="请输入产品名称" style="width: auto" >
              <!-- <span slot="append">查询</span> -->
            </Input>
             &nbsp;&nbsp;&nbsp;
              报修时间
              <DatePicker type="datetime" format="yyyy-MM-dd hh:mm" placeholder="请选择时间"></DatePicker>
              &nbsp;&nbsp;&nbsp;
            <Button type="primary" >查询</Button>
            </div>
            <div class="fr">
              <Button type="warning">我要报修</Button>
            </div>
          </div>

    <div class="mt10">
      <Table border ref="selection" :columns="columns2" :data="data1">
        <template slot-scope="{ row, index }" slot="status">
          <span class="c1" v-if="index==1">正常运行</span>
          <span class="c4" v-else>维修中</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Icon type="ios-paper c1"  size="20"  @click="$router.push('repareDetail')" title="查看"/>
        </template>
      </Table>
    </div>
    
    <div class="page mt20">
      <Page :total="100" show-sizer show-total/>
    </div> 

        </TabPane>
     </Tabs>

    
    
    <!-- dialog -->
    <Modal v-model="modal1" width="400" title="上传文件">
      <div>
        <Upload
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>点击或拖拽上传文件</p>
        </div>
    </Upload>
        <p class="mt10">
          文件名称：
          <Input type="text" style="width:300px;" />
        </p>
        <p class="mt10">
          文件描述：
          <Input type="textarea" style="width:300px;"/>
        </p>
      </div>
      <div slot="footer" class="text-center">
        <Button type="primary" >确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modal1: false,
        tab1: 'name1',
        position: [{
            title: '云服务',
            link: '/admin/cloudService'
          },
          {
            title: '报修管理'
          }
        ],
        columns1: [
          {
            title: '序号',
            key: 'id'
          },
          {
            title: '报修时间',
            key: 'address'
          },
          {
            title: '产品名称',
            key: 'address'
          },
          {
            title: '报修内容',
            key: 'address'
          },
          {
            title: '报修联系人',
            key: 'address'
          },
          {
            title: '联系人手机',
            key: 'address'
          },
          {
            title: '状态',
            slot: 'status'
          },

          {
            title: '操作',
            slot: 'action',
            width: 100,
            align: 'center'
          },
        ],
        columns2: [
          {
            title: '序号',
            key: 'id'
          },
          {
            title: '接单时间',
            key: 'address'
          },
          {
            title: '维修方式',
            key: 'address'
          },
          {
            title: '技术人员',
            key: 'address'
          },
          {
            title: '联系电话',
            key: 'address'
          },
          {
            title: '计划维修时间',
            key: 'address'
          },
          {
            title: '完成维修时间',
            key: 'address'
          },
          {
            title: '状态',
            slot: 'status'
          },

          {
            title: '操作',
            slot: 'action',
            width: 80,
            align: 'center'
          },
        ],
        data1: [{
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },
          {
            id: '103232',
            'address': 'fsdfsdfdsf'
          },

        ],
        cityList: [{
            value: '1',
            label: '全部'
          }]
        }
      },
      mounted() {
          this.$store.commit('UPDATE_POSITION', this.position)
        },
        methods: {
          handleSelectAll(status) {
            this.$refs.selection.selectAll(status);
          }
        }
    }
</script>

<style lang="less" scoped>
</style>
